@extends('manager._layouts.default')
 
@section('main')
 
    <h2>Edit job</h2>

    {{ Notification::showAll() }}

    {{ Form::model($job,
        array(
            'method' => 'put', 
            'route' => array('manager.jobs.update', $job->id)
        )) 
    }}
		<div class="row">
			<div class="row col-lg-12">
				<div class="form-group col-lg-9">
					<label for="title">Job Title</label>
					<input type="text" id="title" name="title" value="{{$job->title}}" class="form-control">
				</div>
				<div class="form-group col-lg-3">
					<label for="slug">Slug</label>
					<i class="fa fa-fw fa-question-circle help" data-toggle="popover" data-placement="right" data-trigger="hover" data-content="This is the friendly URL of the page" data-container="body"></i>
					<input type="text" id="slug" name="slug" value="{{$job->slug}}" class="form-control">
				</div>
			</div>
		</div>

		<div class="row">
			<div class="row col-lg-12">
				<div class="form-group col-lg-9">
					<label for="position">Position</label>
					<input type="text" id="position" name="position" value="{{$job->position}}" class="form-control">
				</div>
				<div class="form-group col-lg-3">
					<label for="jobtypeid">Job Type</label>
					{{ Form::select('jobtypeid', $jobtypes, $job->jobtypeid, array("class"=>"form-control input-sm")) }}
				</div>
			</div>
		</div>

		<div class="row">
			<div class="row col-lg-12">
				<div class="form-group col-lg-6">
					<label for="location">Location</label>
					<input type="text" id="location" name="location" value="{{$job->location}}" class="form-control">
				</div>
				<div class="form-group col-lg-6">
					<label for="salary">Salary</label>
					<input type="text" id="salary" name="salary" value="{{$job->salary}}" class="form-control">
				</div>
			</div>
		</div>

        <ul class="nav nav-tabs">
            <li class="active"><a href="#content" data-toggle="tab">Content</a></li>
            <li><a href="#files" data-toggle="tab">Files</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="content">
                <label for="job-body">Full Job Description</label>
                <textarea name="description" id="job-body-editor" class="form-control">{{$job->description}}</textarea>
			</div>
			
			<div class="tab-pane" id="files">
                <div class="row">
                    <div class="form-group col-lg-12">
                       	<div class="dropzone well" id="imagedropzone">
							<h3>Drop files here or&hellip;</h3>
							<span class="btn btn-success btn-sm fileinput-button">
								<span>Browse for files...</span>
								<!-- The file input field used as target for the file upload widget -->
								<input id="fileupload" type="file" name="thefile" data-url="{{URL::route("manager.jobs.uploadfile", $job->id)}}" multiple>
							</span>
						</div>
                    </div>
					
					<script>
						$(function() {
							$('#fileupload').fileupload({
								dataType: 'json',
								type : "POST",
								autoUpload: true,
								sequentialUploads: true,
								maxFileSize: 2097152, // 2MB server limit
								//acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
								//disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
								//previewMaxWidth: 300,
								//previewMaxHeight: 300,
								//previewCrop: true,
								dropZone: $("#filedropzone"),
								formData: {
									"_":"_" // dummy data to invoke correct route handler
								},
								done: function (e, data) {
									$(data.context).fadeOut("fast", function()
									{
										$(this).remove();
										$("#existingjobfiles").load("{{URL::route("manager.jobs.getfiles", $job->id)}}");
									});
								},
								fail : function(e, data)
								{
									$(data.context).find(".progress").remove();
									$(data.context).find("p").append("<br><small class='label label-danger'>"+data.errorThrown+"</small>");
									//console.log(data);
								}
							}).on('fileuploadadd', function (e, data) {
								data.context = $('<div class="col-lg-2 fileuploaditem"/>').appendTo('#jobfiles');
								$.each(data.files, function (index, file) {
									var node = $('<p class="well text-center" />')
											.append($('<p/>').append($("<small/>").text(file.name)))
											.append($('<div class="progress progress-striped active"><div class="progress-bar progress-bar-success" role="progressbar" style="width: 0%;"></div>'));
									node.appendTo(data.context);
								});
							}).on('fileuploadprocessalways', function (e, data) {
								//console.log(data.index);
								var index = data.index,
									file = data.files[index],
									node = $(data.context.children()[index]);
								
								node
									.prepend('<br>')
									.prepend('<i class="fa fa-fw fa-file-o fa-5x"></i>');
								
							}).on('fileuploadprogress', function (e, data) {
								var progress = parseInt(data.loaded / data.total * 100, 10);
								var file = data.files[0];
								$(".progress-bar", data.context).css("width", progress+"%");
								//console.log(data.index);
								/*$('#progress .progress-bar').css(
									'width',
									progress + '%'
								);*/
							}).on('fileuploadprogressall', function (e, data) {
								var progress = parseInt(data.loaded / data.total * 100, 10);
								if(progress >= 100)
								{
									$("#existingjobfiles").load("{{URL::route("manager.jobs.getfiles", $job->id)}}");
									//document.location.href = document.location.href;
								}
							});
						});
					</script>
                </div>
				
				<div class="row" id="jobfiles"></div>
                
				<div class="row" id="existingjobfiles">
					<? foreach($job->files()->get() as $file):?>
						<div class="col-lg-2 fileuploaditem">
							<div class="well text-center">
								<i class="fa fa-fw fa-file-o fa-5x"></i><br>
								<p>
									<small><strong>{{$file->filename}}</strong></small>
								</p>
								<button type="button" class="btn btn-danger btn-xs btn-block deletejobfile" data-url="{{URL::route("manager.jobs.deletefile", array($job->id, $file->id) )}}"><i class="fa fa-fw fa-trash-o"></i> Delete</button>
							</div>
						</div>
					<? endforeach;?>
				</div>
            </div>
        </div>

        
        <div class="row">
            <div class="col-lg-12">
                <button type="submit" class="btn btn-primary btn-large">Save</button>
                <a href="{{ URL::route('manager.jobs.index') }}" class="btn btn-default btn-large">Cancel</a>
            </div>        
            
        </div>
 
    {{ Form::close() }}
 
@stop